import React from 'react';
import jQuery from "jquery";
import Moment from "moment";
import MyEchart from "../myEchart";

const globalConfig = require("../../js/globalConfig");

class Vib extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            url: this.props.flag === "true" ? globalConfig.url + "/getMainVibration" : globalConfig.url + "/getSubVibration",
            data_1: new Array(20).fill(0),
            data_2: new Array(20).fill(0),
            data_3: new Array(20).fill(0),
            data_4: new Array(20).fill(0),
            xData: new Array(20).fill(0),
            isMount: true,
            option: {
                legend: {
                    data: ["电机", "卷筒左轴承座", "卷筒右轴承座", "导向轮"],
                    selectedMode:"single"
                },
                tooltip: {},
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: "时间",
                    }
                ],
                yAxis: [
                    {
                        name: "振动(μm)",
                        type: 'value',
                    }
                ],
                series: [
                    {
                        symbol: 'circle',
                        name: "电机",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: {
                                    color:"#91cc75"
                                }
                            }
                        }
                    },
                    {
                        symbol: 'rect',
                        name: "卷筒左轴承座",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#ff7875',
                                lineStyle: {
                                    color: '#ff7875'
                                }
                            }
                        }
                    },
                    {
                        symbol: 'triangle',
                        name: "卷筒右轴承座",
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: '#91d5ff',
                                lineStyle: {
                                    color: '#91d5ff'
                                }
                            }
                        }
                    },
                    {
                        symbol: 'diamond',
                        name: "导向轮",
                        type: "line",
                        
                        itemStyle: {
                            normal: {
                                color: '#eb2f96',
                                lineStyle: {
                                    color: '#eb2f96'
                                }
                            }
                        }
                    }
                ],
                grid: {
                    top: 50,
                    left: 45,
                    right: 45,
                    bottom: 25
                }
            },
        }
    }



    componentDidMount() {
        const instance = this.myEchart.echartsReact.getEchartsInstance();
        this.timerID = setInterval(() => {
            var this_ = this;
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        const newData_1 = this_.state.data_1.slice();
                        const newData_2 = this_.state.data_2.slice();
                        const newData_3 = this_.state.data_3.slice();
                        const newData_4 = this_.state.data_4.slice();
                        const newXData = this_.state.xData.slice();
                        newData_1.push(Math.random());
                        newData_2.push(Math.random());
                        newData_3.push(Math.random());
                        newData_4.push(Math.random());

                        newXData.push(Moment(new Date()).format("HH:mm:ss"));
                        newData_1.shift();
                        newData_2.shift();
                        newData_3.shift();
                        newData_4.shift();
                        newXData.shift();
                        this_.setState({
                            data_1: newData_1,
                            data_2: newData_2,
                            data_3: newData_3,
                            data_4: newData_4,
                            xData: newXData,
                        });


                        instance.setOption({
                            xAxis: { data: this_.state.xData },
                            series: [
                                { data: this_.state.data_1 },
                                { data: this_.state.data_2 },
                                { data: this_.state.data_3 },
                                { data: this_.state.data_4 },
                            ]
                        });
                    }
                });
            }
        }, 500);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (
            <MyEchart ref={e => { this.myEchart = e; }} option={this.state.option}/>
        );
    }
}

export default Vib;